<template>
  <div class="index">
    <!-- v-model 双向绑定：哪一个下标的频道处于活动状态  -->
    <van-tabs v-model="activeIndex">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <!--
          在父组件index.vue中把频道信息传给articleList.vue组件
          article-list放在for循环中，但它并不会立刻创建channels.length个组件出来，
          而是具备懒加载的效果： 当你激活当前的tab签，会去创建一个对应的articleList组件。

          监听子组件article-list中传出来的 showMoreAction事件
        -->
        <!-- <article-list
        :channel="item"
        @showMoreAction="hShowMoreAction"></article-list> -->
        项目{{item.name}}
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs } from 'vant';
import { getChannels } from '@/api/channel.js'
export default{
  data(){
    return{
      channels:[]
    }
  },
  components:{
    // 局部使用 vant 组件
   [Tab.name]:Tab,
   [Tabs.name]: Tabs
  },
  created () {
    this.loadChannels()
  },
  mounted(){

  },
  methods:{
    async loadChannels () {
      const result = await getChannels()
      console.log(result)
      this.channels = result.data.data.channels
    }
  }
}
// import { dislikeArticle, reportArticle } from '@/api/article.js'

// import ArticleList from './articleList'
// import ChannelEdit from './channelEdit'
// import MoreAction from './moreAction'
// export default {
//   name: 'Home',
//   props: { },
//   components: {
//     ArticleList,
//     MoreAction,
//     ChannelEdit
//   },
//   data () {
//     return {
//       activeIndex: 0, // 表示当前tabs中处于活动状态是哪一个下标
//       articleId: null, // 当前要执行更加操作时 的文章编号
//       showMoreAction: false, // 是否显示更多操作弹层
//       showChannelEdit: false, // 是否频道编辑操作弹层
//       channels: [] // 频道列表,当前用户已经订阅的频道
//     }
//   },
//   computed: { },
//   created () {
//     this.loadChannels()
//   },
//   methods: {
//     hShowChannelEdit () {
//       this.showChannelEdit = true
//       // this.$refs就可以自动收集所有设置了ref属性的子组件
//       if (this.$refs.refChannelEdit) {
//         this.$refs.refChannelEdit.editing = false
//       }
//     },
//     hCloseChannelEdit () {
//       this.showChannelEdit = false
//     },
//     // 处理子组件中抛出的更新当前频道下标的事件
//     hUpdateCurIndex (index) {
//       this.activeIndex = index
//     },
//     // 处理子组件中抛出的更新当前频道项的事件
//     hUpdateCurChannel (channel) {
//       console.log('处理子组件中抛出的更新当前频道项的事件', channel)
//       // 1. 计算出这个频道在频道列表中的下标
//       const idx = this.channels.findIndex(it => it.id === channel.id)

//       // 2. 更新给activeIndex
//       this.activeIndex = idx
//     },
//     delArticle () {
//       //  (1) 只是本地删除不是直接去删除后端数据（人不喜欢，别人有喜欢的）
//       //       找到对应的articleList组件，把其中的list数据中找出那个文章，删除
//       //  (2) 在通知子组件articleList做删除时，由于一个父组件index.vue中有很多个
//       //      子组件articleList，所以这里要引入事件总线来解决消息的发布

//       // 事件总线发布消息
//       // 参数是一个对象，表示当前要删除的文章编号，及当前的频道编号
//       const eventObj = {
//         articleId: this.articleId,
//         channelId: this.channels[this.activeIndex].id
//       }
//       console.log(eventObj)
//       this.$eventBus.$emit('delArticle', eventObj)
//     },
//     async hDislike () {
//       // alert('收到子组件moreAction中的dislike，要操作的id是' + this.articleId)
//       // 1. 调用接口
//       const result = await dislikeArticle(this.articleId)
//       console.log(result)
//       this.$toast.success('操作成功')
//       // 2. 关闭弹层
//       this.showMoreAction = false

//       // 3. 删除文章
//       this.delArticle()
//     },
//     // 处理用户举报文章
//     async hReport (reportTypeId) {
//       // 1. 调用接口
//       const result = await reportArticle(this.articleId, reportTypeId)
//       console.log(result)
//       this.$toast.success('操作成功')
//       // 2. 关闭弹层
//       this.showMoreAction = false

//       // 3. 删除文章
//       this.delArticle()
//     },
//     // 从子组件artilceList中收到 点击X 的事件
//     hShowMoreAction (articeleId) {
//       // alert('收到hShowMoreAction事件' + articeleId)

//       // 1. 保存要操作的文章编号
//       this.articleId = articeleId

//       // 2. 显示弹层
//       this.showMoreAction = true

//       // 3. 确保 moreAction组件中的isRport设置为false
//       // 由于这个子组件MoreAction是在popup中放置的，所以只在当弹层出来时
//       // 它才会创建出来，所以第一次点击x时，我们在这里并不能访问到这个refMoreAction
//       // if (this.$refs.refMoreAction) {
//       //   // 每次点击x时，打开moreAction弹层，都要 为false.
//       //   // 本质上: 在父组件中去修改子组件的数据
//       //   // 格式： this.$refs.子组件引用.子数组的数据 = 新值
//       //   console.log(this.$refs) // 这是一个对象，它保存着当前组件所有对子组件的引用
//       //   console.log(this.$refs.refMoreAction)
//       //   this.$refs.refMoreAction.isReport = false
//       // }
//       this.$refs.refMoreAction && (this.$refs.refMoreAction.isReport = false)
//     },
//     async loadChannels () {
//       const result = await getChannels()
//       console.log(result)
//       this.channels = result.data.data.channels
//     }
//   }
// }
</script>

<style scoped lang='less'>
// .index 是home/index.vue组件的根元素的类名
.index {
  height: 100%;
  // 让出顶部导航条的距离
  padding-top:46px;
}
</style>
